<template>
	<view>
		<view class="bg-white padding">
			<view class="cu-steps">
				<view class="cu-item" :class="index>num?'':'text-blue'" v-for="(item,index) in numList" :key="index">
					<text class="num" :class="index==2?'err':''" :data-index="index + 1"></text> {{item.name}}
				</view>
			</view>
		</view>
		<view class="box">
			<view class="fot1">厦门万国汽车销售有限公司汽车维修服务协议</view>
			<view class="fot2">
				重要提示：汽车维修服务协议系针对事故（故障）
				道路救援车辆进入厦门万国汽车销售有限公司旗
				下的4S店进行维修时所使用，在您使用道路救援
				并确认入场维修前，请您务必认真阅读本协议，
				须充分理解各条款内容，特别是涉及服务范围及
				服务说明部分。当您接收或者使用道路救援入场
				维修服务时，即表示您已知悉并同意本协议的全
				部内容，如您不同意本协议中的任何条款，请立
				即停止使用。
			</view>
			<view class="fot3">一、服务权益</view>
			<view class="fot4">本协议仅为要约，维修前不产生实际费用：</view>
			<view class="fot5">
				一、实际的维修费用需待车辆入场后经由专业
				的维修技术人员评估并给出具体的维修报价；
				二、4S店必须经过车主本人同意维修报价，不
				得强制维修；
			</view>
			<view class="fot3">二、服务范围</view>
			<view class="fot2">
				实际的维修费用需待车辆入场后经由专业的维
				修技术人员评估并给出具体的维修报价；二、
				4S店必须经过车主本人同意维修报价，不得强
				制维修；实际的维修费用需待车辆入场后经由
				专业的维修技术人员评估并给出具体的维修报
				价；二、4S店必须经过车主本人同意维修报价
				，不得强制维修；实际的维修费用需待车辆入
				场后经由专业的维修技术人员评估并给出具体
				的维修报价；二、4S店必须经过车主本人同意
				维修报价，不得强制维修；实际的维修费用需
				待车辆入场后经由专业的维修技术人员评估并
				给出具体的维修报价；二、4S店必须经过车主
				本人同意维修报价，不得强制维修；
			</view>
		</view>
		<view class="checkbox_box">
			<view class="checkbox" v-if="!sta" @click="checkbox()"></view>
			<view class="checkbox_active" v-if="sta" @click="checkbox()"><image src="../../static/6.png" mode=""></image></view>
			<view>本人已详阅上述合同协议并自愿确认签署。</view>
		</view>
		<view class="btn">确认入场维修</view>
		<!-- 弹窗 -->
		<view class="bg" v-if="tc_sta">
			<view class="tc">
				<view class="tc_title">签署校验</view>
				<view class="tc_title2">
					<image src="../../static/logo.png" mode=""></image>
					<view>厦门鹭江公证处正在调用您的安全数字证书，您正在安全签约环境中，请您放心签署！</view>
				</view>
				<view class="iut_box">.
					<input type="text" value="" placeholder="请输入手机号码"/>
					<view class="iut_yzm">
						<input type="text" value="" placeholder="请输入验证码"/>
						<view @click="countDown()">{{timeString}}</view>
					</view>
				</view>
				<view class="tc_btn">
					<view>取消</view>
					<view>签署</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tc_sta:true,
				timeString:'获取验证码',
				time:5,
				numList: [{
					name: '订单确认'
				}, {
					name: '到场确认'
				}, {
					name: '维修确认'
				}, {
					name: '进站确认'
				}, {
					name: '救援结束'
				},],
				num: 0,
				sta:0,
				dsq:''
			}
		},
		watch:{
			time:function(){
				if(this.time < 1){
					console.log(11111111111)
					clearInterval(this.dsq)
					this.timeString = '重新获取'
					return
				}
			}
		},
		methods: {
			Time:function(){
				this.dsq = setInterval(()=>{
							this.time --
							this.timeString = '重新获取' + this.time
						},1000)
			},
			countDown:function(){
				if(this.timeString != '获取验证码' && this.time !=0){
					uni.showToast({
						title:'不能重复操作',
						icon:'none'
					})
					return
				}else{
					if(this.timeString == '获取验证码'){
						console.log(123456)
						this.timeString = '重新获取' + this.time
						this.Time()
					}else if(this.timeString == '重新获取'){
						console.log(123)
						this.time = 5
						this.timeString = '重新获取' + this.time
						this.Time()
					}
				}
				
			},
			checkbox:function(){
				this.sta = !this.sta
			}
		}
	}
</script>

<style>
	.tc_btn :nth-child(1){
		border-right: 2rpx solid rgba(187, 187, 187, 1);
	}
	.tc_btn>view{
		width: calc(50% - 0.5rpx);
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba(125, 129, 150, 1);
		font-size: 28rpx;
		font-family: PingFangSC-regular;
	}
	.tc_btn{
		width: 100%;
		height: 90rpx;
		border-top: 2rpx solid rgba(187, 187, 187, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.iut_yzm>view{
		width: 30%;
		height: 68rpx;
		border-radius: 10rpx;
		background-color: rgba(32, 178, 103, 1);
		text-align: center;
		border: 2rpx solid rgba(255, 255, 255, 0);
		color: rgba(255, 255, 255, 1);
		font-size: 24rpx;
		font-family: PingFangSC-regular;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.iut_yzm>input{
		width: 60%;
		height: 68rpx;
		margin-right: 10%;
		height: 68rpx;
		border-radius: 10rpx;
		padding: 0 20rpx;
		background-color: rgba(251, 251, 251, 1);
		border: 2rpx solid rgba(187, 187, 187, 1);
	}
	.iut_yzm{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
	}
	.iut_box>input{
		height: 68rpx;
		border-radius: 10rpx;
		padding: 0 20rpx;
		background-color: rgba(251, 251, 251, 1);
		border: 2rpx solid rgba(187, 187, 187, 1);
	}
	.iut_box{
		padding: 0 40rpx;
		box-sizing: border-box;
	}
	.tc_title2>image{
		width: 32rpx;
		height: 42rpx;
		margin-right: 15rpx;
	}
	.tc_title2>view{
		width: 100%;
		line-height: 50rpx;
	}
	.tc_title2{
		height: 128rpx;
		background-color: rgba(235, 241, 247, 1);
		border: 2rpx solid rgba(255, 255, 255, 0);
		color: rgba(12, 12, 12, 1);
		font-size: 16rpx;
		font-family: PingFangSC-regular;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
		padding-right: 0rpx;
		box-sizing: border-box;
	}
	.tc_title{
		color: rgba(16, 16, 16, 1);
		font-size: 32rpx;
		text-align: center;
		font-family: PingFangSC-regular;
		margin: 50rpx 0 24rpx 0;
	}
	.tc{
		width: 560rpx;
		height: 600rpx;
		border-radius: 16rpx;
		border: 2rpx solid rgba(255, 255, 255, 0);
		background-color: #FFFFFF;
		position: relative;
	}
	.bg{
		width: 100vw;
		height: 100vh;
		background-color: rgba(0,0,0,0.3);
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
	}
	.checkbox_active>image{
		width: 22rpx;
		height: 22rpx;
		
	}
	.checkbox_active{
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		border: 2rpx solid rgba(2, 128, 255, 1);
		margin-right: 16rpx;
		background-color: rgba(2, 128, 255, 1);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.btn{
		width: calc(100% - 128rpx);
		height: 100rpx;
		border-radius: 12rpx;
		background-color: rgba(2, 128, 255, 1);
		text-align: center;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(2, 128, 255, 1);
		border: 2rpx solid rgba(255, 255, 255, 0);
		color: rgba(245, 245, 245, 1);
		font-size: 32rpx;
		font-family: Arial;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 60rpx auto;
	}
	.checkbox{
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		border: 2rpx solid #CCCCCC;
		margin-right: 16rpx;
	}
	.checkbox_box{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.fot5{
		color: rgba(16, 16, 16, 1);
		font-size: 28rpx;
		font-family: PingFangSC-regular;
	}
	.fot4{
		color: rgba(14, 16, 13, 1);
		font-size: 32rpx;
		font-family: Microsoft Yahei;
		border: 2rpx solid rgba(255, 255, 255, 0);
	}
	.fot3{
		color: rgba(14, 16, 13, 1);
		font-size: 36rpx;
		font-family: Arial;
		margin-bottom: 20rpx;
	}
	.fot2{
		color: rgba(119, 120, 132, 1);
		font-size: 28rpx;
		font-family: Microsoft Yahei;
		border: 2rpx solid rgba(255, 255, 255, 0);
		margin-bottom: 22rpx;
	}
	.fot1{
		color: rgba(14, 16, 13, 1);
		font-size: 28rpx;
		font-family: Arial;
		margin-bottom: 26rpx;
	}
	.box>view{
		margin-bottom: 30rpx;
	}
	.box{
		padding: 0 46rpx;
		box-sizing: border-box;
	}
	page{
		background-color: #FFFFFF;
	}
</style>
